<#include "/layout/layout.ftl"/>
<@body>
<script src="/script/report/report.js" type="text/javascript"></script>
<!-- Morris.js charts -->
<link rel="stylesheet" href="/lib/adminLte-2.4.5/morris.js/morris.css">
<script src="/lib/adminLte-2.4.5/raphael/raphael.min.js"></script>
<script src="/lib/adminLte-2.4.5/morris.js/morris.min.js"></script>
<script src="/script/tool/date.js"></script>
<div class="container-fluid">
    <div class="col-md-10">
        <div class="island">
        <#--左侧内容-->
            <div class="row">
                <h2 class="title">
                    <span id="testPlanName"></span>
                    <span id="startTime"></span>
                    <div class="subtitle">
                        执行时长:<span id="runTime"></span>秒
                    </div>
                    <div class="subtitle">
                        执行人:<B id="userName"></B> 状态:<span id="status"></span>
                        <a onclick='$("#myModal").modal("show")'>查看日志</a>
                    </div>
                </h2>
            </div>
            <div class="row">
                <div class="box box-danger">
                    <div class="col-md-3">
                        <div class="case__sum">
                            <div>
                                <span id="caseSize"></span>
                            </div>
                            <div class="case__subtitle">测试用例数量</div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="box-body chart-responsive">
                            <div class="chart" id="pass-rate" style="height: 300px; position: relative;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <h2 class="title">
                    接口列表
                    <span class="subtitle">接口数量:<span id="interfaceSize"></span></span>
                </h2>
                <div id="interfaceList" class="col-md-12">

                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <h6 style="font-size: 14px;font-weight: bold;line-height: 31px">执行历史</h6>
        <div id="history"></div>
    </div>
</div>
<div class="modal fade" id="myModal" style="overflow: hidden;margin-left: -300px" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 900px;height: 500px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    运行日志
                </h4>
            </div>
            <div class="modal-body" id="reportLog" style="width: 99%;height: 400px;overflow: auto">
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="buildTestId" value="${buildTestId!}">
<input type="hidden" id="lastTimeFileSize" value="0">

    <style type="text/css">
        .island {
            background: #fff;
            border: 1px solid #e5e5e5;
            padding: 15px 15px 0
        }

        .title {
            margin-top: 0;
            margin-bottom: 15px;
        }

        .subtitle {
            color: #999;
            font-size: 16px;
            padding-top: 3px
        }

        .case__sum {
            padding: 6em 0;
            margin: auto;
            text-align: center
        }

        .case__subtitle {
            color: #999
        }

        #caseSize {
            font-size: 50;
        }

        .bar {
            background: #eee;
            display: inline-flex;
            width: 100%
        }

        .bar__fill_status_failed {
            background: #fd5a3e
        }

        .bar__fill_status_passed {
            background: #97cc64
        }
        .col-md-10 {
            width: 89%;
        }
        .col-md-2 {
            width: 11%;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
        <#if buildTestId??>
                //如果buildTestId不为空的时候，现在有计划在执行中，前端的定时任务
                report.buildTestRefresh();
        <#else >
                report.initPage();
                //如果buildTestId为空的时候，那么现在没有任何计划在执行，默认返回最后一次执行的记录
        </#if>
        })
    </script>
</@body>